<!--
 * @Descripttion: 文件说明
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-11-23 14:09:52
 * @LastEditors: GW
 * @LastEditTime: 2022-01-18 11:03:14
-->
<template>
    <a-drawer wrapClassName="crm-drawer-wrapper" :headerStyle="headerStyle" :wrapStyle="wrapStyle" placement="right" :destroyOnClose="true" :width="width" :mask="false" :visible="visible" :after-visible-change="afterVisibleChange" @close="onClose">
        <detailDrawer :routeUrl="url"></detailDrawer>
        <template slot="title">
            <div class="crm-drawer-title clearfix">
                <div class="item-one">
                    <a-icon type="bank" /> {{title}}
                </div>
                 <div class="item-one" v-show="isCalling">
                        ({{crmTypeArr[customer.crmType]}})
                 </div>
                <div class="item-two text-center" v-show="!isFinance && !isCalling">
                    <div class="" v-if="dataItem.collectId > 0" @click="collect(2)">
                        <div>
                            <a-icon type="heart" theme='filled' class="heart-yes" />
                        </div>
                        已关注
                    </div>
                    <div v-else @click="collect(1)">
                        <div>
                            <a-icon type="heart" theme='filled' class="heart-no" />
                        </div>
                        未关注
                    </div>
                </div>
                <div class="right-box" v-show="!isFinance ">
                    <a-dropdown>
                        <a-menu slot="overlay" @click="handleMenuClick">
                            <a-menu-item key="1" @click="dealSave" v-if="permissions.includes('crm:potential:deal') && !isOcean  && !isCalling && !isMake">
                                <a-icon type="user" />成交
                            </a-menu-item>
                            <a-menu-item key="2" @click="openShareBox" v-if="permissions.includes('crm:potential:share') && !isOcean && !isCalling && !isMake">
                                <a-icon type="user" />共享
                            </a-menu-item>
                            <a-menu-item key="3" @click="release" v-if="permissions.includes('crm:potential:release') && !isOcean && !isCalling && !isMake">
                                <a-icon type="tags" />释放
                            </a-menu-item>
                            <a-menu-item key="4" @click="receive" v-if="permissions.includes('crm:clue:receive') && isOcean && !isCalling && !isMake">
                                <a-icon type="tags" />领用
                            </a-menu-item>
                            <a-menu-item key="5" @click="distribution" v-if="permissions.includes('crm:potential:distribution') && !isCalling" >
                                <a-icon type="branches" />分配
                            </a-menu-item>
                            <a-menu-item key="6" @click="receive" v-if="permissions.includes('crm:clue:receive') && isCalling && customer.crmType ==  0 && !isMake">
                                <a-icon type="tags" />领用
                            </a-menu-item>
                        </a-menu>
                        <a-icon type="ellipsis" style="font-size:36px;cursor: pointer;" />
                    </a-dropdown>
                </div>
            </div>
        </template>
        <!-- <div v-if="loading" style="position:absolute;top:76px;left:0;bottom:0;right:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:201">
            <a-spin class="loading-drawer" tip="加载中..." />
        </div> -->
    </a-drawer>
</template>

<script>
import detailDrawer from "@/views/crm/customer/detailDrawer";
import { detail } from "@/api/crm/customer";
import { mapState } from "vuex";
export default {
    components: {
        detailDrawer
    },
    props: {
        drawerVisible: {
            type: Boolean,
            default: false,
        },
        routeUrl: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: '客户名称'
        },
        dataItem: {
            type: Object,
            default: {}
        },
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    created () {
        console.log("客户抽屉created----------------------->",JSON.stringify(this.dataItem));
        let route = this.$route.path;
        if (route == '/crm/customer/list') {
            this.isOcean = true;
        } else {
            this.isOcean = false;
        }
        if (route.indexOf('/crm/call/simpleTaskCalling') > -1) {
            this.isCalling = true;
        } else {
            this.isCalling = false;
        }
        if (route == '/views/crm/customer/deals') {
            this.isMake = true;
        } else {
            this.isMake = false;
        }

        if (route == '/finance/setting/financeContacts' || //财务
            route == '/unit/setting/financeDistributor' || //供应商档案(供应链)
            route == '/unit/setting/financeClient' || //客户档案(供应链)
            route == '/views/crm/business/list' ||  //商机管理
            route == '/crm/linkMan/list' ||    //联系人
            route == '/crm/touch/list'      //跟进记录
        ) {
            this.isFinance = true;
        } else {
            this.isFinance = false;
        }

    },
    mounted(){
        console.log("抽屉mounted----------------------->",JSON.stringify(this.dataItem));
    },
    data () {
        let crmTypeArr = ["线索客户","潜在客户","服务中客户"];
        return {
            crmTypeArr,
            customer:{},
            visible: false,
            url: '',
            width: 800,
            headerStyle: {
                'background': '#00a0e9',
                'border-radius': 0,
            },
            wrapStyle: {
                'margin-top': '84px',
                'height': '720px',
            },
            loading: false,
            isOcean: false,//是否是公海
            isMake: false,//是否成交
            isFinance: false,//是否财务（不现实关注，和操作按钮）
            isCalling: false,//是否外呼任务
        };
    },
    watch: {
        drawerVisible (val) {
            this.visible = val;
        },
        routeUrl (val) {
            this.url = val;
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 500)
        },
    },
    methods: {
        //1.获取客户基本信息
        detail (id) {
             console.log("客户详情抽屉：获取客户详情ID", id);
            detail({ id }).then(response => {
                console.log("客户详情抽屉：获取客户详情", response);
                if (response.code === 200) {
                    const { data } = response;
                    this.customer = data;
                }
            }).catch(error => { });
        },
        afterVisibleChange (val) {
            console.log(this.routeUrl)
        },
        showDrawer () {
            this.visible = true;
        },
        onClose () {
            this.visible = false;
            this.$emit("update:drawerVisible", false)
        },
        collect (type) {
            console.log(this.dataItem)
            if (type == 2) {
                //取消关注
                this.$emit('collectOut', this.dataItem.id)
                this.dataItem.collectId = 0;
            }
            if (type == 1) {
                //关注
                this.$emit('collectAdd', this.dataItem.id)
                this.dataItem.collectId = 10;
            }
            this.$forceUpdate();
        },
        dealSave () {
            //成交
            this.$emit('dealSave', this.dataItem.id)
        },
        openShareBox () {
            //共享
            this.$emit('openShareBox', this.dataItem.id)
        },
        release () {
            //释放
            this.$emit('release', this.dataItem.id)
        },
        distribution () {
            //分配
            this.$emit('distribution', this.dataItem.id)
        },
        receive () {
            console.log();
            //领用
            this.$emit('receive', this.dataItem.id)
        }
    },
}
</script>

<style lang="less">
    .crm-drawer-wrapper {
        .ant-drawer-body {
            padding: 0;
        }
        .ant-drawer-close {
            color: #fff;
        }
        .crm-drawer-title {
            color: #fff;
            vertical-align: middle;
            font-size: 16px;
            width: 100%;
            padding-right: 30px;
            .anticon {
                font-size: 22px;
            }
            .item-one {
                float: left;
                font-weight: bold;
                width: 200px;
                line-height: 44px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .item-two {
                float: left;
                cursor: pointer;
                font-size: 14px;
            }
            .heart-yes {
                color: #ff4d4f;
            }
            .heart-no {
                color: #ccc;
            }
        }

        .ant-tabs-bar {
            margin-bottom: 0px;
        }

        .right-box {
            float: right;
            width: 44px;
            height: 43px;
            line-height: 51px;
        }
    }
    .loading-drawer {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -30px;
        font-size: 14px;
        color: #fff;
        .ant-spin-dot {
            font-size: 60px;
        }
        .ant-spin-dot i {
            width: 30px;
            height: 30px;
            background: #fff;
        }
    }
</style>